<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<title>简单MVVM框架成果展示</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta name="keywords" content="" />
	<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!--// Meta tag Keywords -->
	<!-- pop up box -->
	<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
	<!-- //pop up box -->
	<link rel="stylesheet" href="css/jquery.desoslide.css">
	<!-- css files -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- Bootstrap-Core-CSS -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link rel="stylesheet" href="css/font-awesome.css">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->
	<link rel="stylesheet" href="css/jquery-ui.css" />
	<!-- web-fonts -->
	<link
		href="http://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext"
		rel="stylesheet">
	<!-- //web-fonts -->

</head>

<body>
	<!-- booking form -->
	<section class="booking py-5" id="booking">
		<h3 class="text-center mb-4">MVVM特性展示</h3>
		<div class="container">
			<div class="book-form">
				<form action="" method="post">
					<div class="row" id="app">
						<div class="col-md-3 col-sm-6 col-6 px-2 form-time-w3layouts editContent">
							<label class="editContent"><span class="fa fa-user" aria-hidden="true"></span>View渲染</label>
							<input type="text" v-model="msg" required readonly="readonly">
						</div>
						<div class="col-md-3 col-sm-6 col-6 px-2 form-time-w3layouts editContent">
							<label class="editContent"><span class="fa fa-user" aria-hidden="true"></span>Model数据修改</label>
							<input type="text" v-model="msg" required>
						</div>
						<div class="col-md-2 col-sm-4 col-6 px-2 form-left-agileits-w3layouts editContent">
							<label class="editContent"><span class="fa fa-bus" aria-hidden="true"></span>Methods案例</label>
							<div class="agileits_w3layouts_main_gridl">
								<input type="text" v-model="color" required>
							</div>
						</div>
						<div class="col-md-2 px-2 col-sm-4 col-6 form-left-agileits-submit editContent">
							<input id="show2" type="submit" value="更改" @click="colorchange">
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>
	<!-- //booking form -->

	<!-- booking bottom -->
	<section class="bottom py-5" id="show">
		<div class="container">
			<div class="row bottom-grids">
				<div class="col-md-6 grid1">
					<h3 class="mb-4">简单MVVM框架实现</h3>
					<a href="#">了解更多</a>
				</div>
				<div class="col-md-3 video-play">
					<!-- video -->
					<div class="video-grid1 mt-4">
						<div class="demo-bg1">
							<div class="pop-bg position-relative">
								<div class="arrow-container animated fadeInDown">
									<a href="#small-dialog1" class="arrow-2 popup-with-zoom-anim">
										<i class="fa fa-play"></i>
									</a>
									<div class="arrow-1 animated hinge infinite zoomIn"></div>
								</div>
								<h4 class="mt-3">Watch video</h4>
								<!--  video-button-popup -->
								<div id="small-dialog1" class="mfp-hide">
									<div class="agileits_modal_body">
										<iframe src="//player.bilibili.com/player.html?aid=882527814&bvid=BV1JK4y1C7oy&cid=170087049&page=1"
											scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
									</div>
								</div>
								<!-- // video-button-popup -->
							</div>
						</div>
					</div>

				</div>
				<div class="col-md-3 mt-md-0 mt-4">
					<img src="images/mvvm.jpeg" style="height: 150px;" alt="" class="img-fluid" />
				</div>
			</div>
		</div>
	</section>
	<!-- //booking bottom -->

	<!-- team -->
	<div class="team py-5">
		<div class="agile_dot_info two">
			<div class="container">
				<h3 class="heading text-center mb-5">我们的团队</h3>
				<div class="row agileits_team_grids">
					<div class="col-lg-3 col-sm-6 agileits_team_grid">
						<div class="agileits_team_grid_figure">
							<img src="images/jqh.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="clearfix"> </div>
						<h4> 金其涵 <span></span></h4>
						<p>He is a 大屁眼子.</p>
					</div>
					<div class="col-lg-3 col-sm-6 agileits_team_grid">
						<div class="agileits_team_grid_figure">
							<img src="images/ldr.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="clearfix"> </div>
						<h4>李鼎睿<span></span></h4>
						<p>代码实现</p>
					</div>
					<div class="col-lg-3 col-sm-6 agileits_team_grid">
						<div class="agileits_team_grid_figure">
							<img src="images/jzz.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="clearfix"> </div>
						<h4>姜中正<span></span></h4>
						<p>测试用例设计</p>
					</div>
					<div class="col-lg-3 col-sm-6 agileits_team_grid">
						<div class="agileits_team_grid_figure">
							<img src="images/wch.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="clearfix"> </div>
						<h4> 王承灏<span></span></h4>
						<p>测试用例设计</p>
					</div>
					<div class="col-lg-3 col-sm-6 agileits_team_grid">
						<div class="agileits_team_grid_figure">
							<img src="images/lx.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="clearfix"> </div>
						<h4>李想 <span></span></h4>
						<p>文档</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- js-scripts -->
	<script src='../dist/bundle.js'></script>
	<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<!--pop-up-box -->
	<script src="js/jquery.magnific-popup.js"></script>
	<script>
		$(document).ready(function () {
			$('.popup-with-zoom-anim').magnificPopup({
				type: 'inline',
				fixedContentPos: false,
				fixedBgPos: true,
				overflowY: 'auto',
				closeBtnInside: true,
				preloader: false,
				midClick: true,
				removalDelay: 300,
				mainClass: 'my-mfp-zoom-in'
			});
		});
	</script>
	<!-- //pop-up-box -->

	<!-- start-smoth-scrolling -->
	<script src="js/SmoothScroll.min.js"></script>
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function () {
			$().UItoTop({
				easingType: 'easeOutQuart'
			});
		});
	</script>

</body>

</html>